<template>
  <div class="mall-page">
    <h1>订单管理系统</h1>

    <div class="add-order">
      <input type="text" v-model="newOrderCustomer" placeholder="客户姓名">
      <input type="text" v-model="newOrderProduct" placeholder="商品名称">
      <input type="number" v-model="newOrderQuantity" placeholder="数量">
      <button @click="addOrder">添加订单</button> <!-- 添加订单按钮 -->
    </div>

    <div class="search-bar">
      <input type="text" v-model="searchTerm" placeholder="搜索客户姓名或商品名称"><!-- 搜索栏 -->
      <button @click="clearSearch">Clear</button><!-- 清空搜索按钮 -->
    </div>

    <table>
      <thead>
        <tr>
          <th @click="sortData('customer')">客户姓名</th>
          <th @click="sortData('product')">商品名称</th>
          <th @click="sortData('quantity')">数量</th>
          <th>操作</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(order, index) in sortedOrders" :key="index">
          <td>{{ order.customer }}</td>
          <td>{{ order.product }}</td>
          <td>{{ order.quantity }}</td>
          <td>
            <button @click="editOrder(index)">编辑</button>
          </td>
          <td>
            <button @click="deleteOrder(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <div v-if="selectedOrder">
      <h2>订单详情</h2>
      <p><strong>客户姓名:</strong> {{ selectedOrder.customer }}</p>
      <p><strong>商品名称:</strong> {{ selectedOrder.product }}</p>
      <p><strong>数量:</strong> {{ selectedOrder.quantity }}</p>
      <button @click="closeDetails">关闭详情</button>
    </div>



    <div v-if="showDeleteModal" class="modal">
      <div class="modal-content">
        <p>确定要删除选中的订单吗？</p>
        <div>
          <button @click="deleteSelectedOrders">确定</button>
          <button @click="cancelDelete">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MallPage',
  data() {
    return {
      orders: [
        { customer: '小红', product: '笔记本电脑', quantity: 2 },
        { customer: '小明', product: '手机', quantity: 1 },
        { customer: '小芳', product: '平板电脑', quantity: 3 },
        { customer: '小强', product: '耳机', quantity: 4 },
        { customer: '小亮', product: '显示器', quantity: 2 },
      ],
      newOrderCustomer: '',
      newOrderProduct: '',
      newOrderQuantity: null,
      searchTerm: '',
      sortKey: '',
      sortDesc: false,
      selectedOrder: null,
      selectedOrders: [],
      showDeleteModal: false,
    };
  },
  computed: {
    sortedOrders() {
      if (this.sortKey) {
        return this.filteredOrders.slice().sort((a, b) => {
          const modifier = this.sortDesc ? -1 : 1;
          return modifier * (a[this.sortKey] > b[this.sortKey] ? 1 : -1);
        });
      }
      return this.filteredOrders;
    },
    filteredOrders() {
      return this.orders.filter(order => {
        return (
          order.customer.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
          order.product.toLowerCase().includes(this.searchTerm.toLowerCase())
        );
      });
    },
    totalQuantity() {
      return this.orders.reduce((total, order) => total + order.quantity, 0);
    },
  },
  methods: {
    addOrder() {
      if (
        this.newOrderCustomer &&
        this.newOrderProduct &&
        this.newOrderQuantity !== null &&
        !isNaN(this.newOrderQuantity)
      ) {
        this.orders.push({
          customer: this.newOrderCustomer,
          product: this.newOrderProduct,
          quantity: this.newOrderQuantity,
        });
        this.resetForm();
      }
    },
    deleteOrder(index) {
      this.orders.splice(index, 1);
    },
    deleteSelectedOrders() {
      this.selectedOrders.forEach(order => {
        const index = this.orders.indexOf(order);
        this.orders.splice(index, 1);
      });
      this.cancelDelete();
    },
    editOrder(index) {
      const order = this.orders[index];
      const newCustomer = prompt('请输入新的客户姓名', order.customer);
      const newProduct = prompt('请输入新的商品名称', order.product);
      const newQuantity = parseInt(prompt('请输入新的数量', order.quantity));
      if (newCustomer && newProduct && newQuantity) {
        order.customer = newCustomer;
        order.product = newProduct;
        order.quantity = newQuantity;
      }
    },
    sortData(key) {
      if (key === this.sortKey) {
        this.sortDesc = !this.sortDesc;
      } else {
        this.sortKey = key;
        this.sortDesc = false;
      }
    },
    resetForm() {
      this.newOrderCustomer = '';
      this.newOrderProduct = '';
      this.newOrderQuantity = null;
    },
    showDetails(order) {
      this.selectedOrder = order;
    },
    closeDetails() {
      this.selectedOrder = null;
    },
    toggleDeleteModal() {
      this.showDeleteModal = !this.showDeleteModal;
      if (!this.showDeleteModal) {
        this.selectedOrders = [];
      }
    },
    selectOrder(order) {
      if (this.selectedOrders.includes(order)) {
        const index = this.selectedOrders.indexOf(order);
        this.selectedOrders.splice(index, 1);
      } else {
        this.selectedOrders.push(order);
      }
    },
    cancelDelete() {
      this.showDeleteModal = false;
      this.selectedOrders = [];
    },
    clearSearch() {
      this.searchTerm = '';
    },
  },
};
</script>

<style>
.mall-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

.add-order {
  margin-bottom: 20px;
}

.search-bar {
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
  cursor: pointer;
}

th:hover {
  background-color: #e6e6e6;
}

tr:hover {
  background-color: #f2f2f2;
}

.operations {
  display: flex;
  justify-content: center;
}

button {
  margin: 5px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}
</style>